<template>
  <div class="all">
    <!-- 项目信息 -->
    <div class='leftaaa'>
      <div class="leftTop">
        <div class="title">
          <span class="word">项目信息</span>
        </div>
        <div class="line"></div>
        <div class="Onecontant">
          <div class="oneMiddle">
            <el-row>
              <el-col :span="12">
                <ul>
                  <li>昆山，江苏</li>
                  <li>950平方米</li>
                  <li>2022年1月8日竣工</li>
                  <li>2022年1月8日接入系统</li>
                </ul>
              </el-col>
              <el-col :span="12">
                <img src="img/left.jpg" alt="">
              </el-col>
            </el-row>

          </div>
          <div class="oneBottom">
                <div class="oneBottomBuleLeft">
                  <div>
                    <p class="blueTitle">OAO涉及系统介绍</p>
                    <ul>
                      <li>暖通空调:</li>
                      <li>介绍</li>
                      <li>介绍</li>
                    </ul>
                    <ul>
                      <li>楼宇自控系统:</li>
                      <li>介绍</li>
                      <li>介绍</li>
                    </ul>
                  </div>


                </div>
                <div class="oneBottomBuleRight">
                    <p class="blueTitle">重要文件</p>
                    <div class="blueTitleright">
                      <span>竣工通知书.DOC </span>
                      <div class="blueicon">
                         <el-tooltip
                          class="box-item"
                          effect="dark"
                          content="查看"
                          placement="top-start"
                        >
                          <sc-icon>
                            <sc-icon-See/>
                          </sc-icon>
                        </el-tooltip>
                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          content="下载"
                          placement="top-start"
                        >
                        <div class="icon2">
                          <sc-icon>
                            <sc-icon-Download/>
                          </sc-icon>
                        </div>

                        </el-tooltip>
                      </div>
                    </div>
                    <div class="blueTitleright">
                      <span>竣工通知书.DOC </span>
                      <div class="blueicon">
                         <el-tooltip
                          class="box-item"
                          effect="dark"
                          content="查看"
                          placement="top-start"
                        >
                          <sc-icon>
                            <sc-icon-See/>
                          </sc-icon>
                        </el-tooltip>
                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          content="下载"
                          placement="top-start"
                        >
                        <div class="icon2">
                          <sc-icon>
                            <sc-icon-Download/>
                          </sc-icon>
                        </div>

                        </el-tooltip>
                      </div>
                    </div>
                </div>
          </div>
        </div>

    </div>
    <Scene/>
    </div>
    <div class='rightaaq'>
      <Facility/>
      <PT/>
      <Alarm/>
    </div>

  </div>
</template>

<script setup>
import Scene from './Scene-demand.vue'
import Facility from './facility.vue'
import PT from './PT.vue'
import Alarm from './Alarm-analysis.vue'
</script>

<style lang="less" scoped>
.blueicon{
  display: flex;
}
.all{
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

ul{
  list-style: none;
}
.leftaaa{
  width:30%;
  height: 100%;
}
.rightaaq{
  width:70%;
  margin-left: 50px;
}
.leftTop{
  background-color: white;
  margin-bottom: 30px;
  height: 100%;
  width:100%;
  border-style: none;
  border-color: unset;
  box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
  border-radius: 8px;
  font-size: 14px;
  padding: 0px;
  line-height: 20px;
  font-weight: normal;
  font-style: normal;
  .title{
    padding: 20px;
     .word{
      font-family: SourceHanSansSC;
      font-weight: 550;
      font-size: 20px;
      color: rgb(77, 98, 165);
      font-style: normal;
      letter-spacing: 2px;
      line-height: 28px;
      text-decoration: none;
    }
  }

  .line{
  border-bottom: 2px rgba(77,98,165,0.2) solid;
  }
  .Onecontant{
    .oneMiddle{
      padding: 24px;
      img{
        display: block;
        width: 151px;
        height: 101px;
        float: right;
        border-radius:8px ;
      }
      ul{
        list-style: none;
        li{
          font-family: SourceHanSansSC;
          font-weight: 400;
          font-size: 14px;
          color: rgb(126, 126, 126);
          font-style: normal;
          letter-spacing: 0px;
          line-height: 20px;
          text-decoration: none;
        }
      }
    }
  }
  .oneBottom{
    width: 100%;
    padding: 0px 20px 15px 20px;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    justify-content: space-around;
     .oneBottomBuleLeft{
        width: 100%;
        height: 222px;
        background-color: rgb(246, 250, 255);
        border-style: none;
        border-color: unset;
        border-radius: 4px;
        font-size: 14px;
        line-height: 20px;
        font-weight: normal;
        font-style: normal;
        .blueTitle{
          font-family: SourceHanSansSC;
          font-weight: 400;
          font-size: 14px;
          color: rgba(127, 127, 127, 1);
          font-style: normal;
          letter-spacing: 0px;
          line-height: 20px;
          text-decoration: none;
          padding: 10px;
        }
        ul{
          margin-bottom: 15px;
          margin-left:10px;
        }
        li{
          font-family: SourceHanSansSC;
          font-weight: 400;
          font-size: 14px;
          color: rgb(126, 126, 126);
          font-style: normal;
          letter-spacing: 0px;
          line-height: 20px;
          text-decoration: none;

        }
    }
    .oneBottomBuleRight{
        margin-top: 10px;
        height: 222px;
        background-color: rgb(246, 250, 255);
        border-style: none;
        border-color: unset;
        border-radius: 4px;
        font-size: 14px;
        line-height: 20px;
        font-weight: normal;
        font-style: normal;
        .blueTitle{
          font-family: SourceHanSansSC;
          font-weight: 400;
          font-size: 14px;
          color: rgba(127, 127, 127, 1);
          font-style: normal;
          letter-spacing: 0px;
          line-height: 20px;
          text-decoration: none;
          padding: 10px;
        }
        .blueTitleright{
          width: 100%;
          // background-color: rgba(127, 255, 212, 0.536);
          display: flex;
          justify-content: space-between;
          padding:0px 10px 0px 10px;
          font-family: SourceHanSansSC;
          font-weight: 400;
          font-size: 14px;
          color: rgb(126, 126, 126);
          font-style: normal;
          letter-spacing: 0px;
          line-height: 20px;
          text-decoration: none;
          line-height: 20px;
        }
        ul{
          margin-bottom: 15px;
          margin-left:10px;
        }
        li{
          font-family: SourceHanSansSC;
          font-weight: 400;
          font-size: 14px;
          color: rgb(126, 126, 126);
          font-style: normal;
          letter-spacing: 0px;
          line-height: 20px;
          text-decoration: none;

        }
    }

  }
}
/deep/.icon2{
  margin-top: 4px;
}
</style>
<style>
.tooltip-base-box {
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}
</style>
